/** 
  查看-实习评分录入表
*/
<template>
  <div class="assess-score-table-container">
    <table class="table-style-baseinfos">
      <tbody>
        <tr>
          <td class="text-right-background-color">{{ $t('internEvaluateIndexSet.internEvalTemp') }}:</td>
          <td colspan="3" class="text-left-background-none">{{ internScoreInfo.templateName }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('internSummary.trainingLevel') }}:</td>
          <td class="text-left-background-none">{{ internScoreInfo.trainingLevelStr }}</td>
          <td class="text-right-background-color">{{ $t('internSummary.trainingCategory') }}:</td>
          <td class="text-left-background-none">{{ internScoreInfo.trainingTypeStr }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('internSummary.degreeType') }}:</td>
          <td class="text-left-background-none">{{ internScoreInfo.degreeTypeStr }}</td>
          <td class="text-right-background-color">{{ $t('internSummary.formLearning') }}:</td>
          <td class="text-left-background-none">{{ internScoreInfo.learnFormStr }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('internSummary.evaluationDesc') }}:</td>
          <td colspan="3" class="text-left-background-none">{{ internScoreInfo.description }}</td>
        </tr>
      </tbody>
    </table>
    <el-form :model="assessScoreForm" ref="assessScoreForm">
      <table class="table-style-baseinfo">
        <thead>
          <tr>
            <th class="text-center-background-color">{{ $t('internEvaluateTempSet.evaluateIndex') }}</th>
            <!-- 评价权重开始 -->
            <!-- <th class="text-center-background-color">评价权重</th> -->
            <!-- 评价权重结束 -->
            <th class="text-center-background-color">{{ $t('internEvaluateTempSet.evaluateDetails') }}</th>
            <th class="text-center-background-color">{{ $t('internEvaluateTempSet.evaluateDetailsDes') }}</th>
            <!-- 明细权重开始 -->
            <!-- <th class="text-center-background-color">明细权重</th> -->
            <!-- 明细权重结束 -->
            <th class="text-center-background-color">{{ $t('baseAssess.score') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in assessScoreForm.dataList" :key="index">
            <td v-if="item.subCount" :rowspan="item.subCount" class="text-center-background">{{ item.itemName }}</td>
            <!-- 评价权重开始 -->
            <!-- <td>{{ item.itemWeight }}</td> -->
            <!-- 评价权重结束 -->
            <td class="text-center-background">{{ item.detailName }}</td>
            <td class="text-center-background">{{ item.detailDescription }}</td>
            <!-- 明细权重开始 -->
            <!-- <td class="text-center-background">{{ item.detailWeight }}</td> -->
            <!-- 明细权重结束 -->
            <td class="text-center-background">{{ item.detailScore }}</td>
          </tr>
          <tr>
            <td class="text-center-background-color" colspan="3">{{ $t('baseAssess.totalScore') }}</td>
            <td class="text-center-background-color">{{ internScoreInfo.score }}</td>
          </tr>
        </tbody>
      </table>
    </el-form>
    <div class="operate-info-container">
      <el-button @click="back()">{{$t('common.btn.back')}}</el-button>
    </div>
  </div>
</template>
<script>
import graduateStudentApi from 'common/src/api/graduateStudent/graduateStudent';
export default {
  components: {
  },
  props: {
    dataListProp: {
      type: Object,
      default: () => {}
    },
    gradeId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      internScoreInfo: {},
      assessScoreForm: {
        dataList: []
      }
    }
  },
  created() {
    
  },
  mounted() {
  },
  methods: {
    // 返回
    back() {
      this.$emit('confirm-to-close-score-table')
    }
  },
  watch: {
    dataListProp: {
      handler(newVal) {
        this.internScoreInfo = JSON.parse(JSON.stringify(newVal))
        if (this.internScoreInfo.itemList && Array.isArray(this.internScoreInfo.itemList) && this.internScoreInfo.itemList.length > 0) {
          this.internScoreInfo.itemList.map((item, index) => {
            if (item.detailList && item.detailList.length > 0) {
              item.detailList.map((subItem, subIndex, subArray) => {
                if (subIndex === 0) {
                  subItem['subCount'] = subArray.length
                }
                subItem['detailScore'] = subItem.detailScore || subItem.detailScore === 0 ? subItem.detailScore : ''
                this.assessScoreForm.dataList.push({ ...item, ...subItem })
              })
            } else {
              item['detailName'] = ''
              item['detailDescription'] = ''
              item['detailWeight'] = ''
              item['subCount'] = 1
              item['detailScore'] = ''
              delete item.detailList
              this.assessScoreForm.dataList.push(item)
            }
          })
        } else {
          this.assessScoreForm.dataList = []
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .inner-breadcrumb {
    .breadcrumb {
      span {
        font-weight: normal;
        color: #aaa;
      }
      a {
        font-weight: normal;
        color: #aaa;
      }
      a:hover {
        color: #409eff;
      }
      .last {
        font-weight: bold !important;
        cursor: default !important;
      }
      .disable {
        cursor: default !important;
      }
    }
  }
  .condition-title-p {
    font-weight: 400;
    font-style: normal;
    color: #2b3b4e;
    font-size: 18px;
    margin-bottom: 15px;
  }
  .base-info-title {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #2b3b4e;
  }
  .table-style-baseinfos {
    table-layout: fixed;
    word-break: break-all;
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
  }
  .table-style-baseinfo {
    table-layout: fixed;
    word-break: break-all;
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
  }
  .table-style-baseinfos td {
    width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
  }
  .table-style-baseinfo td {
    width: 15%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
  }
  .self-score ::v-deep {
    width: 20%!important;
    .el-form-item {
      margin-bottom: 0!important;
    }
    .is-error {
      margin-bottom: 18px!important;
    }
  }
  .table-style-baseinfos .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
  }
  .table-style-baseinfo .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
  }
  .text-center-background-color {
    background-color: #fdfeff4d;
    text-align: center;
  }
  .text-center-background {
    text-align: center;
  }
  .text-left-background-none {
    text-align: left;
  }
  .sub-title {
    margin: 0 0 15px 5px;
    font-size: 17px;
    color: #2b3b4e;
  }
  .assess-score-table-container ::v-deep {
    .el-dialog__body {
      word-break: break-all!important;
    }
  }
  .operate-info-container {
    text-align: right;
  }
</style>